<!-- webprint.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用PyQt5打印热敏小票</title>
</head>
<style type="text/css">
    * {padding:0;margin: 0;}
    h1 {font-size: 20px;}
    h3 {font-size: 16px;}
    .left {float: left;}
    .right {float:right;}
    .clearfix {clear: both;}
    ul {list-style: none;}
    .print_container {width: 250px;}
    .section2 label {display: block;}
    .section3 label {display: block;}
    .section4 .total label {display: block;}
    .section4 {border-bottom: 1px solid #DADADA;}
    .section5 label {display: block;}
</style>
<body>
<div id="capture">
    <div class="print_container">
        <h3>便利店</h3>
        <span>***************************************</span>
        <div class="section3">
            <label>订单号：700001001201811161631123558</label>
            <label>下单时间：2018-10-16 16:31:14</label>
            <label>收银员：王小明</label>
        </div>
        <span>***************************************</span>
        <div class="section4">
            <div style="border-bottom: 1px solid #DADADA;">
                <table style="width: 100%;">
                    <thead>
                    <tr>
                        <td width="60%">品名</td>
                        <td width="20%">数量</td>
                        <td width="20%">金额</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>今麦郎</td>
                        <td>1</td>
                        <td>100.00</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="total">
                <label class="left">合 计</label>
                <label class="right">100.00</label>
                <div class="clearfix"></div>
                <label class="left">收款金额</label>
                <label class="right">100</label>
                <div class="clearfix"></div>
                <label class="left">找零金额</label>
                <label class="right">0.00</label>
                <div class="clearfix"></div>
            </div>
            <div style="text-align: right;">
                <label>顾客已付款</label>
            </div>
            <span>***************************************</span>
        </div>
        <div class="section5">
            <label>电话：</label>
        </div>
        <span>***************************************</span>
        <div class="section5">
            <label>欢迎光临，谢谢惠顾！</label>
            <label>便利店</label>
        </div>
    </div>
</div>
<div>
    <button onclick="do_print()">进行html打印</button>
</div>
<script src="qwebchannel.js" type="text/javascript"></script>
<script>
    window.onload = function() {
        new QWebChannel(qt.webChannelTransport, function (channel) {
            window.printer = channel.objects.printer;
        });
    }

    function do_print() {
        if (printer !== null) {
            var html = document.querySelector('#capture').innerHTML;
            printer.print(html);
        }
    }
</script>
</body>
</html>